/*------------------------------------*
    #FORMS
/*------------------------------------*

//
// Basic form styles

.form-group
  margin-bottom: 15px
  &::before,
  &::after
    content: ''
    display: table
  &::after
    clear: both

label
  display: inline-block
  max-width: 100%
  margin-bottom: 5px
  font-size: 12px
  color: $gray-light

// Merged Class
// Merge with by form-control class

.easyui-textbox
  padding: $padding-base-vertical $padding-base-horizontal
  background-color: $textbox-bg-color
  font-size: $font-size-base
  color: #555
  +border-radius (2px)
  +transition(background-color, 0.28s, ease-out)
  &:focus
    background-color: #d7d7d7
    color: #000
    outline: none
    +transition(background-color, 0.28s, ease-in)

input[type=file]
  display: block

.help-block
  display: block
  margin-top: 5px
  margin-bottom: 10px
  color: #737373
  font-size: $font-size-base

.checkbox,
.radio
  position: relative
  display: block
  margin-top: 10px
  margin-bottom: 10px

.checkbox .label,
.radio .label
  min-height: 20px
  padding-left: 20px
  margin-bottom: 0
  font-weight: 400
  cursor: pointer

//
// From inline styles

.form-inline
  & .form-group
    +inline-block()
    margin-bottom: 0

.form-inline
  & .easyui-textbox
    +inline-block()
    width: auto

//
// From horizontal styles

.form-horizontal
  & .control-label
    padding-top: 7px
    margin-bottom: 0
    text-align: right

.form-horizontal-left
  & .control-label
    text-align: left

.form-horizontal .checkbox,
.form-horizontal .radio
  min-height: 27px

.form-horizontal .checkbox,
.form-horizontal .checkbox-inline,
.form-horizontal .radio,
.form-horizontal .radio-inline
  padding-top: 7px
  margin-top: 0
  margin-bottom: 0

//
// Custom checkbox and radio button

.easyui-checkbox
  display: inline-block
  width: 12px
  vertical-align: top
  -webkit-appearance: none
  outline: none
  &::before
    +font-icons(FontAwesome, '\f096', 14px, #4C4949)
    +transition(color, 300ms, ease-in-out)
  &:checked
    &::before
      +font-icons(FontAwesome, '\f046', 14px, $brand-info)
      +transition(color, 300ms, ease-in-out)

.easyui-radio
  display: inline-block
  width: 12px
  vertical-align: top
  -webkit-appearance: none
  outline: none
  &::before
    +font-icons(FontAwesome, '\f10c', 14px, #4C4949)
    +transition(color, 300ms, ease-in-out)
  &:checked
    &::before
      +font-icons(FontAwesome, '\f192', 14px, $brand-info)
      +transition(color, 300ms, ease-in-out)

